<template>
  <div class="song-icon" :class="playing ? 'playing' : ''" @click="openFullScreen">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
    <span class="line line4"></span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'playing'
    ])
  },
  methods: {
    openFullScreen () {
      this.$emit('openFullScreen')
    }
  }
}
</script>

<style lang="stylus" scoped>
.song-icon {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;

  .line {
    width: 0.03rem;
    height: 0.4rem;
    border-radius: 1rem;
    background-color: #fff;
    position: absolute;
    bottom: 0.04rem;

    &.line1 {
      height: 0.3rem;
      left: 0;
    }

    &.line2 {
      height: 0.12rem;
      left: 30%;
    }

    &.line3 {
      height: 0.4rem;
      left: 60%;
    }

    &.line4 {
      height: 0.2rem;
      left: 90%;
    }
  }

  &.playing {
    .line1 {
      animation: line1 0.6s infinite ease-in-out alternate;
    }

    .line2 {
      animation: line2 0.6s infinite ease-in-out alternate;
    }

    .line3 {
      animation: line3 0.6s infinite ease-in-out alternate;
    }

    .line4 {
      animation: line4 0.6s infinite ease-in-out alternate;
    }
  }
}

.nav-bar .song-icon {
  display: inline-block;
  vertical-align: middle;
}

@keyframes line1 {
  from {
    height: 0.24rem;
  }

  to {
    height: 0.12rem;
  }
}

@keyframes line2 {
  from {
    height: 0.12rem;
  }

  to {
    height: 0.35rem;
  }
}

@keyframes line3 {
  from {
    height: 0.35rem;
  }

  to {
    height: 0.2rem;
  }
}

@keyframes line4 {
  from {
    height: 0.2rem;
  }

  to {
    height: 0.3rem;
  }
}
</style>
